<template>
  <div>
    <h1>农作物管理 (◐‿◑)﻿</h1><hr>
      <div style="padding-right: 1180px">
        <el-button
            size="mini"
            type="primary"
            @click="openAddCrop">新增农作物</el-button>
        <el-button
            size="mini"
            type="success"
            @click="openAddHousehold">新增农户</el-button>
      </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="cropNumbering"
          label="作物编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cropName"
          label="作物名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sysTypeName"
          label="状态"
          width="180">
        <template v-slot="scope">
          <el-button v-if="scope.row.sysTypeName=='种植中'" type="success" plain>种植中</el-button>
          <el-button v-if="scope.row.sysTypeName=='已出售'" type="danger" plain>已出售</el-button>
          <el-button v-if="scope.row.sysTypeName=='待运输'" type="danger" plain>待运输</el-button>
          <el-button v-if="scope.row.sysTypeName=='运输中'" type="danger" plain>运输中</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="cropDetails(scope.row)">作物详情</el-button>
          <el-button
              size="mini"
              type="text"
              @click="openAddCycleRecord(scope.row)">周期记录</el-button>
          <el-button
              size="mini"
              type="text"
              @click="openProcessDetails(scope.row.cropNumbering)">过程详情</el-button>
          <el-button
              size="mini"
              type="text"
              @click="openLogisticsTracking(scope.row.id)">物流追踪</el-button>
          <el-button
              size="mini"
              type="text"
              v-if="scope.row.sysTypeName=='种植中'"
              @click="openAdviseTransport(scope.row)">通知运输</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--   新增农作物 -->
    <div>
      <el-dialog title="记录作物" :visible.sync="dialogFormVisible" width="35%" >
        <el-form :model="form">
          <!--          第一行-->
          <el-col :span="10">
            <el-form-item label="作物名称" :label-width="formLabelWidth">
              <el-input v-model="form.cropName"  placeholder="请输入作物名称" autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="作物类型" :label-width="formLabelWidth">
              <el-select v-model="form.cropType" placeholder="请选择">
                <el-option v-for="(item,index) in cropTypeData" :label="item.sysName" :value="item.sysName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          第二行-->
          <el-col :span="10">
            <el-form-item label="肥料名称" :label-width="formLabelWidth">
              <el-input v-model="form.fertilizerName"  placeholder="请输入肥料名称" autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="种植方式" :label-width="formLabelWidth">
              <el-select v-model="form.plantType" placeholder="请选择">
                <el-option v-for="(item,index) in plantTypeData" :label="item.sysName" :value="item.sysName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          第三行-->
          <el-col :span="10">
            <el-form-item label="种植年度" :label-width="formLabelWidth">
              <el-input v-model="form.plantYear" placeholder="请输入种植年度" autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否套袋" :label-width="formLabelWidth">
              <el-select v-model="form.bagging" placeholder="请选择">
                <el-option v-for="(o,index) in baggingData" :label="o.sysName" :value="o.sysName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          第四行-->
          <el-col :span="10">
            <el-form-item label="育苗周期" :label-width="formLabelWidth">
              <el-input v-model="form.seedlingCycle" placeholder="请输入育苗周期"  autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="灌溉周期" :label-width="formLabelWidth">
              <el-input v-model="form.irrigationCycle" placeholder="请输入灌溉周期"  autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>

          <!--          第五行-->
          <el-col :span="10">
            <el-form-item label="施肥周期" :label-width="formLabelWidth">
              <el-input v-model="form.fertilizationCycle" placeholder="请输入施肥周期" autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="除草周期" :label-width="formLabelWidth">
              <el-input v-model="form.weedingCycle" placeholder="请输入除草周期"  autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>
          <!--          第六行-->
          <el-col :span="10">
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input v-model="form.addr" placeholder="请输入详细地址" autocomplete="off" style="width: 150px;margin-right: 1000px"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="农户" :label-width="formLabelWidth">
              <el-select v-model="form.householdId" placeholder="请选择">
                <el-option v-for="(item,index) in householdData" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          第七行-->
          <el-col :span="18">
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="form.remark"
                  autocomplete="off" style="width: 442px;margin-right: 1000px">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 500px">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addCrop">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--    新增农户-->
    <div>
      <el-dialog title="新增农户" :visible.sync="dialogFormHousehold" width="40%">
        <el-form :model="householdfrom">
          <el-form-item label="农户姓名" :label-width="formLabelWidth">
            <el-input v-model="householdfrom.name" placeholder="请输入农户姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="householdfrom.phone" placeholder="请输入农户电话"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 500px">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addHousehold">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--  作物详情  -->
    <div>
      <el-dialog title="作物详情" v-model="form" :visible.sync="dialogFormCropDetails" >
          <el-col :span="10">
            <span>农作物ID：{{form.cropNumbering}}</span>
          </el-col>
          <el-col :span="10">
            <span>农作物名称：{{form.cropName}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>地址：{{form.addr}}</span>
          </el-col>
          <el-col :span="10">
            <span>农户：{{form.cropHouName}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>施肥情况：{{form.fertilizationCycle}}</span>
          </el-col>
          <el-col :span="10">
            <span>种植方式：{{form.plantType}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>肥料名称：{{form.fertilizerName}}</span>
          </el-col>
          <el-col :span="10">
            <span>是否套袋种植：{{form.bagging}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>农户电话：{{form.phone}}</span>
          </el-col>
          <el-col :span="10">
            <span>种植年度：{{form.plantYear}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>育苗周期：{{form.seedlingCycle}}</span>
          </el-col>
          <el-col :span="10">
            <span>灌溉周期：{{form.irrigationCycle}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>除草周期：{{form.weedingCycle}}</span>
          </el-col>
          <el-col :span="10">
            <span>登记时间：{{form.createTime}}</span>
          </el-col><br><br><hr>
          <el-col :span="10">
            <span>备注：{{form.remark}}</span>
          </el-col><br><br>
      </el-dialog>
    </div>
<!--   打开周期记录嵌套表单 -->
    <div>
      <el-dialog title="记录作物生长情况" :visible.sync="dialogFormCycleDetails" width="50%">
        <el-form :model="cycleform">
          <span><h3>{{cycleform.cropName}}</h3></span>
          <hr><br>
          <el-col :span="10">
            <el-form-item label="温度" :label-width="formLabelWidth">
              <el-input v-model="cycleform.temperatures" placeholder="请输入温度" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="生长情况" :label-width="formLabelWidth">
              <el-input v-model="cycleform.growthCondition" placeholder="请输入生长情况" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="水分" :label-width="formLabelWidth">
              <el-input v-model="cycleform.cropHydration" placeholder="请输入水分" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="光照情况" :label-width="formLabelWidth">
              <el-input v-model="cycleform.lightCondition" placeholder="请输入光照情况" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="cycleform.remark"
                  autocomplete="off" style="width: 442px;margin-right: 1000px">
              </el-input>
            </el-form-item>"
          </el-col>
          <el-col :span="16">
            <el-form-item label="文件上传" :label-width="formLabelWidth">
              <template>
                <uploader :options="options" class="uploader-example" @file-success="onFileUpload">
                  <uploader-unsupport></uploader-unsupport>
                  <uploader-drop>
                   <p>Drop files here to upload or</p>
                    <uploader-btn>select files</uploader-btn>
                    <uploader-btn :attrs="attrs">select images</uploader-btn>
                    <uploader-btn :directory="true">select folder</uploader-btn>
                 </uploader-drop>
                  <uploader-list></uploader-list>
                </uploader>
              </template>
            </el-form-item>
          </el-col>
        </el-form>

        <div slot="footer" class="dialog-footer" style="margin-top: 500px">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addCycleRecord">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--  打开过程详情  -->
    <div>
      <el-dialog title="农作物链上过程详情" :visible.sync="dialogTableProcessDetails" width="60%">
        <el-table :data="gridData">
          <el-table-column property="id" label="过程ID" width="100"></el-table-column>
          <el-table-column property="cropNumbering" label="作物编号" width="100"></el-table-column>
          <el-table-column property="growthCondition" label="生长状态"></el-table-column>
          <el-table-column prop="lightCondition" label="光照情况"></el-table-column>
          <el-table-column prop="createTime" label="记录时间"></el-table-column>
          <el-table-column prop="temperatures" label="温度"></el-table-column>
          <el-table-column prop="cropHydration" label="水分状态"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="img" label="图片">
            <template v-slot="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.img"
                  :fit="fit"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
<!--    通知运输嵌套表单-->
    <div>
      <el-dialog title="联系运输" :visible.sync="dialogFormAdvise" width="35%">
        <el-form :model="adviseform">
          <el-col :span="15">
            <el-form-item label="选择司机" :label-width="formLabelWidth">
              <el-select v-model="adviseform.deiversId" placeholder="请选择">
                <el-option
                    v-for="item in deiversData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="选择厂家" :label-width="formLabelWidth">
              <el-select v-model="adviseform.manufacturerId" placeholder="请选择">
                <el-option
                    v-for="item in facturerData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="adviseform.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 200px">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addAdvise">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--  物流追踪嵌套表单  -->
    <el-dialog title="物流追踪" :visible.sync="dialogLogisticsTracking" width="80%"><hr>
      <template>
        <baidu-map>
          <bm-view class="map">
          </bm-view>
          <bm-driving
              v-model="mapform"
              :end="mapform.facturerAddr"
              :start="mapform.cropAddr"
              :auto-viewport="true"
              policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
              :panel="false"
              >
          </bm-driving>
        </baidu-map>
      </template>
    </el-dialog>
<!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.crop.pageNum"
          :page-sizes="pageSizes"
          :page-size="this.crop.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "CropsView",
  data(){
    return{
      options:{
        target:'http://172.20.10.5:8003/api/sys-crop/upload',
        testChunks:false,
        chunkSize:'2048000'
      },
      attrs:{
        accept:'image/*'
      },
      mapform:{},
      dialogLogisticsTracking:false,
      dialogFormAdvise:false,
      deiversData:[],
      dialogTableProcessDetails:false,
      gridData:[],
      dialogTableVisible:false,
      cycleform:{},
      dialogFormCycleDetails:false,
      householdfrom:{},
      tableData:[],
      dialogFormVisible:false,
      form:{},
      formLabelWidth:'120px',
      cropTypeData:[],
      plantTypeData:[],
      baggingData:[],
      householdData:[],
      dialogFormHousehold:false,
      dialogFormCropDetails:false,
      adviseform:{},
      facturerData:[],
      crop:{
        pageNum:1,
        pageSize:3
      },
      total:0,
      pageSizes:[1, 2, 3, 4]
    }
  },methods:{
    // 打开物流追踪嵌套表单
    openLogisticsTracking(id){
      this.dialogLogisticsTracking=true;
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getAddr?id="+id).then(res=>{
        this.mapform=res.data
      })
      /*setTimeout(()=>{
        this.$router.go(0) // 显示弹框
      },10000);*/
    },
    /*添加通知运输*/
    addAdvise(){
      console.log(this.adviseform)
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/addAdvise",this.adviseform).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！！！！");
          this.dialogFormAdvise=false;
          this.cropList();
        }
      })
    },
    // 打开通知运输嵌套表单
    openAdviseTransport(row){
      this.adviseform={}
      this.adviseform.cropId=row.id;
      this.adviseform.cropAddr=row.addr;
      //alert(this.adviseform.cropAddr=row.addr)
      this.dialogFormAdvise=true
      this.getDeiversList();
      this.getManufacturerList();
    },
    /*打开过程详细嵌套的表单*/
    openProcessDetails(cropNumbering){
      this.dialogTableProcessDetails=true;
      /**
       * 根据id 去查询作物表和 周期表的 关联数据
       */
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/processDetails?cropNumbering="+cropNumbering).then(res=>{
        console.log(res.data)
        this.gridData=res.data
      })
    },
    /*添加周期记录详情*/
    addCycleRecord(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/addCycleRecord",this.cycleform).then(res=>{
        if(res.data=='success'){
            this.$message.success("添加成功！！!!");
            this.dialogFormCycleDetails=false;
            this.cropList();
        }
      })
    },
    /*打开作物周期嵌套表单*/
    openAddCycleRecord(row){
      this.cycleform.cropNumbering=row.cropNumbering
      this.cycleform.cropId=row.id
      this.cycleform.cropName=row.cropName
      //alert(this.cycleform.cropId)
      this.dialogFormCycleDetails=true
    },
    /*根据id去查询作物详情和农户*/
    getByIdCrop(id){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getByIdCrop?id="+id).then(res=>{
        console.log("sss"+JSON.stringify(res.data))
        this.form=res.data;
      })
    },
    // 作物详情
    cropDetails(row){
      this.dialogFormCropDetails = true;
      this.getByIdCrop(row.id)
      this.form=row
      setTimeout(()=>{
        this.dialogFormCropDetails = true; // 显示弹框
      },1000);
    },
    /*
    农作物列表方法
    */
    cropList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/cropList",this.crop).then(res=>{
        console.log(res.data)
        this.tableData=res.data.list;
        this.crop.pageNum=res.data.pageNum;
        this.crop.pageSize=res.data.pageSize;
        this.total=res.data.total;
      })
    },/*打开新增农作物嵌套表单*/
    openAddCrop(){
      this.form={}
      this.dialogFormVisible=true;
      this.cropTypeList();
      this.plantTypeList();
      this.baggingList();
      this.householdList();
    },
    /*作物类型*/
    cropTypeList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/cropTypeList").then(res=>{
          this.cropTypeData=res.data
      })
    },
    /*
    *种植方式列表
    * */
    plantTypeList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/plantTypeList").then(res=>{
        this.plantTypeData=res.data;
      })
    },/*是否套袋*/
    baggingList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/baggingList").then(res=>{
        this.baggingData=res.data;
      })
    },/*关闭嵌套表单*/
    cancel(){
      this.dialogFormVisible=false;
    },addCrop(){
      console.log(this.form)
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/addCrop",this.form).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！")
          this.dialogFormVisible=false;
          this.cropList();
        }
      })
    },/*农户列表*/
    householdList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/householdList").then(res=>{
        this.householdData=res.data;
      })
    },/*打开新增农户嵌套表单*/
    openAddHousehold(){
      this.dialogFormHousehold=true
    },addHousehold(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/addHousehold",this.householdfrom).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！")
          this.dialogFormHousehold=false;
          this.cropList();
        }
      })
    },/*大文件上传方法*/
    onFileUpload(file){
      alert(JSON.stringify(file))
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    },/*司机列表*/
    getDeiversList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getDeiversList").then(res=>{
        this.deiversData=res.data
      })
    },/*获取厂家列表*/
    getManufacturerList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getManufacturerList").then(res=>{
        this.facturerData=res.data
      })
    },handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.crop.pageSize=val;
      this.cropList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.crop.pageNum=val;
      this.cropList();
    }
  },created() {
    this.cropList();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.map {
  width: 100%;
  height: 300px;
}
</style>